import { FC, useEffect, useState } from 'react';
import classNames from 'classnames'
import './toast.style.scss'

// 提示框：调用，3秒后消失
const Toast:FC<any> = (props) => {
  const [show, setShow] = useState<boolean>(false)

  const classes = classNames('toast-wrapper', {
    'hide': show
  })

  useEffect(() => {
    let timer = setTimeout(() => {
      setShow(true)
    }, 3000)
    // willUnMount
    return () => {
      clearTimeout(timer)
    }
  }, [])

  return <div className={classes}>
    <div className="mask"></div>
    <div className="tip-wrapper">
      <div className="tip"></div>
      <div className="text">提示文字</div>
    </div>

  </div>
}

export default Toast;
